<template>
  <div>
    <div id="chart" @touchmove.prevent>
    </div>
    <div class="title">24小时趋势图</div>
    <div class="footer"></div>
  </div>
</template>

<script>
  import echarts from 'echarts';
  export default {
    name: 'HelloWorld',
    data() {
      return {}
    },
    methods: {
      callJS: function(param) {
        // var option = this.$chart.getOption(param.yLow, param.yHigh, param.min, param.max, {
        //   keyList: param.keyList,
        //   valueList: param.valueList
        // }, param.unit);
        var option = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }]
        };
        console.log(option);
        this.$chart.line('chart', option);
      },
    },
    created() {
      window.callJS = (data) => {
        this.callJS(data);
      }
    },
    mounted() {},
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #chart {
    width: 100%;
    height: 290px;
    z-index: 100;
  }
  .title {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 16px;
    font-weight: 500;
    color: white;
    z-index: 101;
  }
  .footer {
    width: 100%;
    height: 30px;
  }
</style>
